<template>
	<view class="entryInfo">
		<!-- 设备入库 --- 查看记录--- 查看详情 -->
		<navBar title="查看详情" goBackUrl="/subpackage-equipment/pages/device/deviceEntry" @goBack="goBack"></navBar>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="box">
				<!-- 自有资产 -->
				<view class="content" v-if="type === '自有资产'">
					<view class="box2">
						<view class="nav">
							<image class="image" src="/subpackage-equipment/static/ziyou.png" mode=""></image>
							<text class="text">自有资产</text>
						</view>
			
						<view class="info">
							<view class="title">{{ deviceInfoObj.subDeviceTypeName || "" }}</view>
							<view class="info-item">
								<view class="name">入库编号：</view>
								<view class="value">{{ deviceInfoObj.inWarehouseCode || "" }}</view>
							</view>
							<view class="info-item">
								<view class="name">设备品牌：</view>
								<view class="value">{{ deviceInfoObj.brand || "" }}</view>
							</view>
							<view class="info-item">
								<view class="name">生产日期：</view>
								<view class="value">{{ deviceInfoObj.time || "" }}</view>
							</view>
							<view class="info-item">
								<view class="name">设备编号：</view>
								<view class="value">{{ deviceInfoObj.code || "" }}</view>
							</view>
							<!-- <view class="info-item">
								<view class="name">设备原值：</view>
								<view class="value">{{ deviceInfoObj.price || "" }}元</view>
							</view> -->
							<view class="info-item">
								<view class="name">存放基地：</view>
								<view class="value">{{ deviceInfoObj.stationName || "" }}</view>
							</view>
							<!-- <view class="info-item">
								<view class="name">存储区域：</view>
								<view class="value">{{ deviceInfoObj.storageAreaName || "" }}</view>
							</view> -->
						</view>
					</view>
					
			
					<view class="table" v-if="maintenanceList.length !== 0">
						<view class="t-item">
							<text class="f1">维养项目</text>
							<text class="f2">维养启动时间</text>
							<text class="f3">提醒周期</text>
						</view>
						<view class="t-item bd" v-for="item in maintenanceList" :key="item.id">
							<text class="f1">{{ item.maintenanceItem }}</text>
							<text class="f2">{{ item.time }}</text>
							<text class="f3">{{ item.period }}天</text>
						</view>
					</view>
				</view>
				
				
				
				<!-- 租赁资产 -->
				<view class="content" v-else>
					<view class="box2">
						<view class="nav">
							<image class="image" src="/subpackage-equipment/static/zulin.png" mode=""></image>
							<text class="text">租赁资产</text>
						</view>
						<view class="info">
							<view class="title">{{ maintenanceObj.subDeviceTypeName || "" }}</view>
							<view class="info-item">
								<view class="name">存放基地：</view>
								<view class="value">{{ maintenanceObj.stationName || "" }}</view>
							</view>
						<!-- 	<view class="info-item" v-for="(item,index) in maintenanceObj.list" :key="index">
								<view class="name">存储区域：</view>
								<view class="value">{{ item.storageAreaName || "" }}</view>
							</view> -->
							<view class="info-item">
								<view class="name">设备编号:</view>
								<view class="value">{{ maintenanceObj.code || "" }}</view>
							</view>
							<view class="info-item">
								<view class="name">租赁日期：</view>
								<view class="value">{{ maintenanceObj.time || "" }}</view>
							</view>
							<view class="info-item">
								<view class="name">租赁时间：</view>
								<view class="value">{{ maintenanceObj.rentDays || "" }}天</view>
							</view>
							<view class="info-item">
								<view class="name">操作人员：</view>
								<view class="value">{{ maintenanceObj.rentOperator || "" }}</view>
							</view>
							<view class="info-item">
								<view class="name">联系方式：</view>
								<view class="value">{{ maintenanceObj.phone }}</view>
							</view>
							<view class="info-item">
								<view class="name">设备所属：</view>
								<view class="value">{{ maintenanceObj.rentUnit || "" }}</view>
							</view>
						</view>
					</view>
					<view style="margin-top:15rpx"></view>
				</view>
				
				
				<!-- 自有资产 和 租赁资产 都有 -->
				<!-- <view class="flow">
					<view class="f-title">流程</view>
					<view class="f-body">
						<u-steps class="step" current="1" dot direction="column" activeColor="#2F80ED" inactiveColor="#2F80ED">
							<u-steps-item title="入库提交" desc="2月15日  18:25"></u-steps-item>
							<u-steps-item title="入库审核" desc="2月15日  18:25"></u-steps-item>
						</u-steps>
						<view class="user">
							<view class="user-item">
								<image class="userImg" src="/static/image/dispatch/user.png" mode=""></image>
								<text class="username">卢灵风</text>
							</view>
							<view class="user-item">
								<image class="userImg" src="/static/image/dispatch/user.png" mode=""></image>
								<text class="username">卢灵风</text>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import { getEquipmentListCode, getEqMaintenanceList } from "@/api/device/deviceEntry.js"
	import mixins from "@/utils/mixins.js"
	export default{
		name: "entryInfo",
		mixins: [mixins],
		components: {
			navBar
		},
		data() {
			return {
				type: "",         // 显示自有资产还是租赁资产
				code: "",         // 设备的code
				deviceInfoObj: [],  // 设备入库详情
				maintenanceList: [], // 维养项目详情
				maintenanceObj: {},
			}
		},
		onLoad(option){
			this.type = option.type
			this.code = option.code
			this.getDeviceInfo()
			if(this.type === "自有资产"){
				this.getEqMaintenanceList(this.code)
			}
			console.log(option)
		},
		methods: {
			// 设备详情
			getDeviceInfo(){
				getEquipmentListCode({code: this.code}).then(res=>{
					// console.log(res,'res')
					if(this.type === "自有资产"){
						let deviceInfoList = res.result.map(item=>({...item, time: this.getDate(item.productionDate || '')}))
						this.deviceInfoObj = deviceInfoList[0]
						// console.log(this.deviceInfoList)
					}else{
						this.maintenanceObj = res.result[0]
						if(res.result[0].rentDate){
							this.maintenanceObj.time = this.getDate2(res.result[0].rentDate)
						}else{
							this.maintenanceObj.time = "-"
						}
						
						let list = res.result
						let arr = []
						
						arr = list.map(item=>({storageAreaName: item.storageAreaName, num: 1}))
						arr = this.DelSameObjValue(arr,'storageAreaName','num')
						this.maintenanceObj.list = arr
						// console.log(arr,'newArr', arr)
					}
				})
			},
			
			// 用code查询维养项目详情
			getEqMaintenanceList(code){
				let _data={
					currPage: 1,
					pageSize: 10000,
					params:{
						code
					}
				}
				getEqMaintenanceList(_data).then(res=>{
					console.log(res.result.list)
					res.result.list.forEach(item=>{
						if(item.startTime){
							item.time = this.getDate(item.startTime)
						}
					})
					this.maintenanceList= res.result.list.filter(item=>{
						if(item.maintenanceItem !== "" || item.period !== 0 ){
							return item
						}
					})
					console.log(this.maintenanceList,'this.maintenanceList')
				})
			},
			
			goBack(url){
				console.log(url)
				uni.navigateBack({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.entryInfo{
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		.scroll-box{
			max-height: calc(100vh - 170rpx);
			padding-top: 10rpx;
		}
		.box{
			background-color: #f5f7fa;
			padding-top: 30rpx;
			.content{
				background-color: #FFFFFF;
				padding: 28rpx;
				.box2{
					padding: 0rpx 26rpx;
				}
				.nav{
					line-height: 80rpx;
					height: 80rpx;
					border-bottom: 2rpx dashed #E1E1E1;
					padding-bottom: 10rpx;
					
					.image{
						width: 70rpx;
						height: 70rpx;
						vertical-align: middle;
						margin-right: 30rpx;
					}
					.text{
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #F99C34;
					}
					.color{
						color: #5EAAFF;
					}
				}
				.info{
					.title{
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #22204E;
						line-height: 40rpx;
						margin-top: 28rpx;
						margin-bottom: 26rpx;
					}
					.info-item{
						display: flex;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #445469;
						margin-top: 20rpx;
						.name{
							width: 140rpx;
						}
					}
				}
				
				.table{
					margin-top: 26rpx;
					background: #F8FBFF;
					padding: 0rpx 36rpx;
					.t-item{
						border-bottom: 2rpx dashed #E0E7F6;
						line-height: 84rpx;
						height: 84rpx;
						display: flex;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #6B7889;
						.f1{
							flex: 1.5;
						}
						.f2{
							flex: 2.2;
						}
						.f3{
							flex: 1.2;
						}
					}
					.bd{
						color: #22204E;
						font-size: 28rpx;
					}
					
				}
			}
			
			.flow{
				margin-top: 30rpx;
				background-color: #FFFFFF;
				padding-left: 62rpx;
				padding-right: 72rpx;
				padding-top: 36rpx;
				.f-title{
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #22204E;
					margin-bottom: 54rpx;
				}
				.f-body{
					height: 200rpx;
					padding-left: 10rpx;
					display: flex;
					.user{
						flex: 1;
						.user-item{
							text-align: right;
							margin-bottom: 150rpx;
						}
						.userImg{
							width: 50rpx;
							height: 50rpx;
							vertical-align: middle;
							margin-right: 14rpx;
						}
						.username{
							font-size: 22rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #6A819E;
						}
							
					}
				}
			}
		}
	}
</style>
